<gm:page title="My App" authenticate="false">

 <head>
	
<link href="./resources/threeD3.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="./resources/tabbedmenu.css" type="text/css" >
<script type="text/javascript" src="./resources/tabbedmenu.js">
</script>

  <style>
  
 #boxheader{
   background-image: url(./resources/gradient.PNG);
  background-repeat:repeat-x;
  }
 
  
#containermenu{
  background-image: url(./resources/gradient-short.PNG);
  background-repeat:repeat-x;
  }
  
</style>

 
</head>

<body onload="controlsubmenu('tab1','tabA');return false; controlsubmenu('tab1','tabA');return false;">
<div id="mypage">
  
 <div id="boxheader"> 
         <div id="boxlogo">
            citymarkers
          </div>

   <div id="containermenu">
        <div id="menu">
 
<div class="col1">
<ul>
<li>
<a href="#1"  onClick="visiting();return false;">Visiting</a>
</li>
<li>
<a href="#1" onClick="realestate();return false;" >Real estate</a>
</li>
<li>
<a href="#3"  >Finance</a>
</li>
<li>
<a href="#4"  >Games</a>
</li>
<li>
<a href="#5"  >Groups</a>
</li>
</ul>

</div>

<div class="col1">
<ul  >
<li>
<a href="#1"  >HotJobs</a>
</li>
<li>
<a href="#2"  >Maps</a>
</li>
<li>
<a href="#3"  >Mobile Web</a>
</li>
<li>
<a href="#4" >Movies</a>
</li>
<li>
<a href="#5" >Music</a>
</li>
</ul>
</div>

<div class="col1">

<ul >
<li>
<a href="#1" >Personals</a>
</li>
<li>
<a href="#2"  >Real Estate</a>
</li>
<li>
<a href="#3" >Shopping</a>
</li>
<li>
<a href="#4"  >Sports</a>
</li>
<li>
<a href="#5"  >Tech</a>
</li>
</ul>
</div>

  <div class="col1">

<ul >
<li>
<a href="#1"  >Tech</a>
</li>
<li>
<a href="#2"  >Travel</a>
</li>
<li>
<a href="#3" >Movies</a>
</li>
<li>
<a href="#4" >Yellow Pages</a>
</li>
<li>

<a href="#5"  >W? </a>
</li>
</ul>
</div>

</div>   
</div>  
</div>  

<div id="boxinfo">
<gm:list id="list"  data="http://pipes.yahoo.com/pipes/pipe.run?_id=OPV5Wm1x3BGchjugTaoASA&_render=rss" template="simple" height="460px">

  <gm:handleEvent src="map"   />
  
 </gm:list>
</div>


<div id="boxmap">
<gm:map id="map" height="465" width="618" data="${list}"  infotemplate="bubbleTemplate" maptypes="true" zoom="13" lat="49.283" lng="-123.12"  latref="geo:lat" lngref="geo:long" create="true">
  <gm:handleEvent src="list" />
  </gm:map>
</div>

</div>  

 
 
 </body>
 
  <gm:template id="bubbleTemplate" >
      
 <div repeat="true">
   
   <div class="bubble">
         <table class="tabnav"  >
            
            <tbody><tr>
             
              <gm:link ref="atom:link/@href" labelref="atom:title" style="font-size:15px"/>
              
              </td> 
            <td  >
            <gm:textarea ref="atom:author/atom:name" style="font-size:12px" /></td>
          
          <tr>
               <td colspan="5" >
             <gm:html ref="atom:summary"/>
              
          
          
               </tr> 
     
    </table>
    </div>
  </gm:template>  

 <script>
  
  
  function realestate() {

  var list = google.mashups.getObjectById('list');
      list.setData('http://pipes.yahoo.com/pipes/pipe.run?_id=vGNf5x5q3BG_01Iuj9zu1g&_render=rss');  
  centerMap();
  return list
   
   }
  
   function visiting() {

  var list = google.mashups.getObjectById('list');
      list.setData('http://pipes.yahoo.com/pipes/pipe.run?_id=OPV5Wm1x3BGchjugTaoASA&_render=rss');  
    centerMap();
    return list
   }

function clearMap() {

var map = google.mashups.getObjectById("map").getMap();
        map.clearOverlays();
  
  }
      
 function centerMap() {

google.mashups.getObjectById("map").centerOnLocation("333 W 6th Ave, Vancouver, BC");
            
  }
  
</script>



</gm:page>